import { InputNumber } from "antd"
import { useState } from "react"
import { transitionE, transitionF } from "./help"
import styles from './styles.module.scss'


const AmountTransitionFigures: React.FC = () => {
  const [figures, setFigures] = useState('')



  const transitionFun = (number: number | null) => {
    if (!number) {
      setFigures('')
      return
    }
    let result = ''
    let [f, e] = number.toString().split('.')
    result += transitionF(f) + '元' + transitionE(e?.slice(0, 2) ?? '')
    setFigures(result)
  }

  return (
    <div className={styles.container}>
      <InputNumber size='large' style={{ width: 300 }} onChange={transitionFun} />
      <div className={styles.result}>
        {!figures ? <div className={styles.placeholder}>转换成的结果在这!</div> : figures}
        
      </div>
    </div>
  )
}

export default AmountTransitionFigures